<!-- 随堂问题 -->
<template>
	<view class="content">
		<view class="nav">
			<view class="nav_item">
				<view class="nav_item_top">我收到的</view>
				<view class="nav_item_bottom">
					<!-- <view>-</view> -->
					<view class="left" v-if="user_data.get">{{user_data.get}}</view>
					<view class="left" v-else>0</view>
					<view class="rigth">次</view>
				</view>
			</view>
			<view class="nav_item">
				<view class="nav_item_top">我发布的</view>
				<view class="nav_item_bottom">
					<!-- <view>-</view> -->
					<view class="left" v-if="user_data.give">{{user_data.give}}</view>
					<view class="left" v-else>0</view>
					<view class="rigth">次</view>
				</view>
			</view>
			<view class="nav_item">
				<view class="nav_item_top">获得的赞</view>
				<view class="nav_item_bottom">
					<!-- <view>-</view> -->
					<view class="left" v-if="user_data.like">{{user_data.like}}</view>
					<view class="left" v-else>0</view>
					<view class="rigth">个</view>
				</view>
			</view>
		</view>

		<view class="select_nav">
			<view class="select_nav_item" :class="{select_state:select_id==0}" @click="select(0)">我发布的</view>
			<view class="select_nav_item" :class="{select_state:select_id==1}" @click="select(1)">我收到的</view>
		</view>
		<view style="height: 208upx;"></view>
		<view class="no_answer" v-if="dataListno.length!=0">
			<view class="title">未回答</view>
			<view class="item" v-for="(item,index) in dataListno" :key="index" @click="gotodetails(item.questionId)">
				<view class="item_top">{{item.questionContent}}</view>
				<view class="item_bottom">
					<view class="left">未回答</view>
					<view class="rigth">{{item.crTime}}</view>
				</view>
			</view>
		</view>
		<view class="answer" v-if="dataListyes.length!=0">
			<view class="title">已回答</view>
			<view class="item" v-for="(item,index) in dataListyes" :key="index" @click="gotodetails(item.questionId)">
				<view class="item_top">{{item.questionContent}}</view>
				<view class="item_bottom">
					<view class="left">
						<i v-if="item.isLike==1" class="iconfont icondianzan"></i>
						已回答
					</view>
					<view class="rigth">{{item.crTime}}</view>
				</view>
			</view>
		</view>

		<view class="not_data" v-if="dataListyes.length==0&&dataListno.length==0">
			<i class="iconfont iconzanwuwenda"></i>
			<view class="not_data_text">暂还没问答~</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select_id: 0,
				currentChild: [],
				user_data: [],
				courseKey: '',
				dataListyes: [],
				dataListno: []
			}
		},
		onLoad(e) {
			this.courseKey = e.courseKey;
			this.currentChild = uni.getStorageSync('currentChild');
			// 查询自己的答题数据
			this.getData(this.courseKey);

		}, 
		onShow() {
			this.select_id = 0;
			this.dataListno = [];
			this.dataListyes = [];
			// 获取问题列表
			this.getList(this.select_id);
		},
		methods: {
			// 获取学生自己的数据
			getData: function(courseKey) {
				var data = {
					courseKey: courseKey,
					userId: this.currentChild.student_id,
					reqMethod: 2
				};

				this.$capi.apiPost('question/selMySelfData', data).then(res => {
					var Data = res.data;
					if (Data.code == 200) {
						this.user_data = Data.data;
					} else {
						uni.showToast({
							title: Data.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取学生列表
			getList: function(select_id) {
				var data = {
					courseKey: this.courseKey,
					reqMethod: 2
				};

				if (select_id == 0) {
					data.userId = this.currentChild.student_id;
				} else {
					data.userType = 2;
				}
				this.$capi.apiPost('question/selQuestion', data).then(res => {
					var Data = res.data;
					if (Data.code == 200) {
						var list = Data.data;
						if (Data.data.length != 0) {
							list.forEach((item, index) => {
								if (item.questionStatus) {
									this.dataListyes.push(item);
								} else {
									this.dataListno.push(item);
								}
							});
						}
					} else {
						uni.showToast({
							title: Data.msg,
							icon: 'none'
						});
					}
				});
			},
			select: function(index) {
				this.select_id = index;
				this.dataListyes = [];
				this.dataListno = [];
				// 获取问题列表
				this.getList(this.select_id)
			},
			gotodetails: function(questionId) {
				uni.navigateTo({
					url: 'essaydetails?questionsId=' + questionId + '&select_id=' + this.select_id + '&courseKey=' + this.courseKey
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		background: rgba(250, 250, 250, 1);
		position: absolute;
	}

	.nav {
		width: 100%;
		height: 120upx;
		background:rgba(255,153,0,1);
		display: flex;
		justify-content: space-between;
		position: fixed;
		z-index: 999;

		.nav_item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: auto;

			.nav_item_top {
				color: #FFFFFF;
				font-size: 32upx;
			}

			.nav_item_bottom {
				color: #FFFFFF;
				display: flex;
				justify-content: center;

				.left {
					font-size: 32upx;
				}

				.rigth {
					font-size: 24upx;
					margin-left: 3upx;
					padding-top: 10upx;
				}
			}
		}
	}

	.select_nav {
		width: 100%;
		height: 88upx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		position: fixed;
		z-index: 999;
		top: 120upx;

		.select_nav_item {
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: auto;
			color: #666666;
			font-size: 34upx;
			justify-content: center;
			align-items: center;
		}

		.select_state {
			margin-bottom: 20upx;
			color: #FF9900;
		}

		.select_state:after {
			content: "";
			width: 60upx;
			height: 5upx;
			position: relative;
			top: 12upx;
			background: #FF9900;
		}
	}



	.no_answer,
	.answer {
		.title {
			width: 92%;
			height: 100upx;
			line-height: 100upx;
			margin: auto;
			color: #333333;
			font-size: 34upx;
		}

		.item {
			margin: auto;
			width: 92%;
			height: 140upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.06);
			border-radius: 8upx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20upx;

			.item_top {
				width: 95%;
				height: 80upx;
				line-height: 80upx;
				font-size: 34upx;
				color: #666666;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 24upx;
			}

			.item_bottom {
				display: flex;
				justify-content: space-between;

				.left {
					margin-left: 24upx;
					color: rgba(255, 113, 113, 1);
					font-size: 26upx;
					display: flex;
					justify-content: flex-start;
				}

				.rigth {
					margin-right: 24upx;
					font-size: 26upx;
					color: rgba(194, 194, 194, 1);
				}
			}
		}
	}

	.no_answer {
		.item {
			.item_bottom {
				.left {
					color: rgba(255, 113, 113, 1);
					font-size: 26upx;
				}
			}
		}
	}

	.answer {
		.item {
			.item_bottom {
				.left {
					color: rgba(0, 213, 162, 1);
					font-size: 26upx;
				}
			}
		}
	}


	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		i {
			margin-top: 150upx;
			font-size: 370upx;
			line-height: 340upx;
			color: rgba(194, 194, 194, 1);
		}

		.not_data_text {
			color: #999999;
			font-size: 42upx;
			line-height: 40upx;
			margin-top: 15upx;
			margin-left: 25upx;
		}

	}

	.news {
		position: fixed;
		right: 48upx;
		bottom: 62upx;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background: linear-gradient(317deg, rgba(104, 229, 131, 1) 0%, rgba(32, 204, 157, 1) 100%);
		box-shadow: 0px 4px 14px rgba(14, 155, 111, 0.48);
		text-align: center;
		line-height: 100upx;

		i {
			color: #FFFFFF;
			font-size: 60upx;
		}
	}
</style>
